<template>
  <div class="shell">

    <el-card class="box-card-1">
      <el-row>
        <el-col class="article-title">{{msg.title}}</el-col>
        <el-col>
          <el-row>
            <el-col :span="2">
              <el-image
                  class="media-img"
                  style="width: 48px; height: 48px"
                  :src="msg.auth_url"
                  :fit="'cover'">
              </el-image>
            </el-col>
            <el-col :span="20">
              <el-row >
                <a href="javascript:void(0)" class="article-auth" @click="checkAuth(msg.auth)">{{msg.auth}}</a>
                <el-button size="mini" type="danger" plain @click="followAuth(msg.auth)" round class="article-auth-follow" :autofocus="false">
                  关注
                </el-button>
              </el-row>
              <el-row class="article-status"><span>{{msg.time}}</span><span>字数&nbsp;{{msg.words}}</span><span>阅读数&nbsp;{{msg.reads}}</span></el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>

      <el-row>
        {{msg.content}}
      </el-row>

      <el-row class="article-likes">
        <el-col :span="12" class="article-likes-left">
          <a href="javascript:void(0)" @click="likeIt" class="like-icon" ref="likeIconRef"><i class="el-icon-caret-top"></i></a>

          {{msg.likes}}人点赞&nbsp;>
        </el-col>
        <el-col :span="12" class="article-likes-right">
          <i class="el-icon-document-copy"></i>
          <a href="javascript:void(0)">{{msg.tag}}</a>
        </el-col>
      </el-row>

      <el-divider/>

      <el-row class="body-reword">
        <el-row>"小礼物走一走，来简书关注我"</el-row>
        <el-row>
          <el-button size="large" type="danger"  autofocus @click="toAward" round class="body-reword-btn">
            赞赏支持
          </el-button>
        </el-row>
        <el-row>还没有人赞赏,支持一下</el-row>
      </el-row>

      <el-row class="body-auth">
        <el-col :span="3">
          <el-image
              class="media-img"
              style="width: 50px; height: 50px"
              :src="msg.auth_url"
              :fit="'cover'">
          </el-image>
        </el-col>
        <el-col :span="18 ">
          <el-row>
            <a href="javascript:void(0)" class="body-auth-name" @click="checkAuth(msg.auth)"><span >{{msg.auth}}</span></a>&nbsp
            <span class="body-auth-about">（{{msg.about}}）</span></el-row>
          <el-row class="body-auth-status"><span>总资产{{msg.total_wealth}}</span><span>总共写了{{msg.total_words}}字</span><span>共获得{{msg.total_likes}}个赞</span><span>共{{msg.total_follows}}个粉丝</span></el-row>
        </el-col>

        <el-col :span="3" class="body-auth-follow">
          <el-button size="small" type="danger" plain @click="followAuth(msg.auth)" round class="article-auth-follow">
            关注
          </el-button>
        </el-col>

      </el-row>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: "MainArticle",
    data() {
      return {
        msg: {
          title: '这个项目的gitee地址',
          auth: '码农小光',
          about: 'https://gitee.com/ashin10/my-jianshu-simulate-project',
          auth_url: 'https://murasakichigo.xyz/my-jianshu-simu/assets/img/avatars/cdeb9e5e-3b6f-4768-8269-d2945fbcb5e0.jpg',
          time: '2019.12.11 11:23:41',
          words: '282',
          reads: '4,094',
          content: '```https://gitee.com/ashin10/my-jianshu-simulate-project```' +
              '<<<<<下面是演示内容>>>>>,下载缓存策略：在指定下载文件 md5 或者后台有返回 md5 的情况下，下载框架默认开启下载缓存模式，如果这个文件已经存在手机中，并且经过 md5 校验文件完整，框架就不会重复下载，而是直接回调下载监听。减轻服务器压力，减少用户等待时间。',
          likes: 13,
          tag: 'Android',
          total_wealth: '202',
          total_words: '4.5W',
          total_likes: '1,145',
          total_follows: '1,145',
        },
        isLiked: false,
      }
    },
    methods: {
      checkAuth(auth) {
        alert('即将查看作者:'+auth);
      },
      followAuth(auth) {
        alert('关注作者:'+auth);
      },
      likeIt() {
        if (!this.isLiked) {
          this.$refs.likeIconRef.style.color = '#ec7259';
          this.isLiked = true;
          this.msg.likes ++;
        }else {
          this.isLiked = false;
          this.msg.likes--;
          this.$refs.likeIconRef.style.color = '';
        }
      },
      toAward() {
        alert('进行了赞赏');

      }
    }
  }
</script>

<style scoped lang="less">

  .el-button {
    outline:none;
  }

  .shell {
    line-height: 2;
    color: #404040;
    outline:none;
  }

  .el-card{
    margin-top: 20px;
  }

  .article-title {
    font-size: 30px;
    font-weight: 700;
    word-break: break-word;
  }

  .article-auth {
    font-size: 17px;
    color: #404040;
    text-decoration:none;
  }


  .article-status {
    color: #969696;
    font-size: 13px;
    > span {

      margin-right: 10px;
    }

  }

  .article-auth-follow {
    margin-left: 20px;
    font-size: 12px;
    color: #ec7259
  }

  .article-likes {
    color: #969696;
    margin-top: 15px;
  }

  .like-icon{
    color: #969696;
    text-decoration:none;
    font-size: 20px;
  }

  .article-likes-left {
    font-size: 14px;

  }
  .article-likes-right {
    text-align: right;
    a {
      margin-left: 5px;
      color: #969696;

    }

  }

  .body-reword{
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    > .el-row {
      margin-bottom: 20px;

    }
  }

  .body-reword-btn {
    font-size: 16px;
    background: #ec7259;
  }

  .body-auth {
    margin-top: 15px;
    padding: 10px 20px;
    background: #fafafa;

  }

  .body-auth-name {
    color: #404040;
    font-size: 16px;
    text-decoration:none;

  }

  .body-auth-about {
    margin-right: 10px;
    font-size: 16px;
    color: #868686;

  }

  .body-auth-status {
    font-size: 14px;
    color: #a7a7a7;
    > span {
      margin-right: 10px;
    }
  }

  .body-auth-follow {
    margin-top: 15px;
    > .el-button {
      font-size: 14px;
      padding: 10px 15px;
    }

  }

</style>